<!DOCTYPE HTML>
<html>
    <head>
        <link rel = 'stylesheet' href='layout/player.css'/>
        <script src ='lib/player.js' ></script>
    </head>
    <body>
        <section id='playerContainer' class='player paused'>
            <video id='videoContainer' class='video draggable' ></video>
            <div id='controlContainer' class='controls'>
                <button id='play' class='play icon-play'></button>
                <button id='pause' class='hide pause icon-pause'></button>
                <progress id ='prog' class='progress' ></progress>
                <div id = 'count' class = 'count'></div>
                <button id='mute' class='icon-vol mute'></button>
                <button id='volume' class='icon-vol2 volume'></button>
                <input type='range'
                       id='volRange'
                       class='volRange hidden'
                       max=1
                       min=0
                       step=0.05
                />
                <button id='fullscreen' class='icon-fullscreen fullscreen'></button>
                <button id='smallscreen' class='icon-fullscreen-exit smallscreen'></button>
            </div>
            <section id='dropArea' class='dropArea'>
                <div class='dropZone'>
                    Drag and Drop
                    <br/>
                    video here
                </div>
                <button id='fileChooser' class='fileChooser'>
                    Choose File
                </button>
                <input type='text'
                       id='enterLink'
                       class='enterLink'
                       placeholder='URL or path'
                />
                <input type='file'
                       accept="video/*"
                       id='chooseVideo'
                       class='chooseVideo hide'
                />
            </section>
            <button id='close' class='close'>X</button>
            <section id='error' class='error hide hidden'>
                <h1 id='errorMessage'></h1>
            </section>
        </section>
    </body>
</html>
